<!--
 * @Author: pjji
 * @describe: 入口页
 * @LastEditTime: 2020-12-07 15:19:22
-->
<template>
  <div class="layout-wrap">
    <nav-bar/>
    <div class="main">
      <router-view/>
    </div>
    <tabbar/>
  </div>
</template>

<script>
import tabbar from "./components/tabbar";
import navBar from "./components/navBar";
import { mapActions, mapState } from "vuex";
import Fingerprint2 from 'fingerprintjs2'; // 引入fingerprintjs2
import FingerprintJS from "@fingerprintjs/fingerprintjs"; // 引入fingerprintjs3+
export default {
  components: {
    navBar, tabbar
  },
  data() {
    return {
      active: 0
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo
    })
  },
  methods: {
    ...mapActions(["getUserInfo", "getNavMenuData", "logOut"]),
    /**
     * @name: 统一设置cookie
     * @msg: 用于开发联调时, 自由设置cookie项
     * @param {*}
     * @return {*}
     */
    setCookie() {
      if (process.env.NODE_ENV === "development") {
        this.$cookies.set(
            "JSESSIONID",
            "604AAD05EE552ACBEA3025574E80B4F4"
        ); //setCookie
      }
    },
    // 创建浏览器指纹
    createFingerprint() {
      // // 浏览器指纹 v2.0 写法
      // const fingerprint = Fingerprint2.get((components) => { // 参数只有回调函数时，默认浏览器指纹依据所有配置信息进行生成
      //   const values = components.map(component => component.value); // 配置的值的数组
      //   const murmur = Fingerprint2.x64hash128(values.join(''), 31); // 生成浏览器指纹
      //   console.log(components);
      //   console.log(values);
      //   console.log(murmur);
      //   localStorage.setItem('browserId', murmur); // 存储浏览器指纹，在项目中用于校验用户身份和埋点
      //   import('vue').then(async resp => {
      //     // console.log(resp);
      //     resp.default.prototype.$visitorId = murmur
      //   })
      // });
      // 浏览器指纹 v3.0 写法
      const fpPromise = FingerprintJS.load();
      (async () => {
        const fp = await fpPromise;
        const result = await fp.get();
        const murmur = result.visitorId
        localStorage.setItem('browserId', murmur); // 存储浏览器指纹，在项目中用于校验用户身份和埋点
        import('vue').then(async resp => {
          resp.default.prototype.$visitorId = murmur
        })
      })()
    }
  },
  async created() {
    this.setCookie();
    // 您不应在页面加载时或加载后直接运行指纹。 而是使用setTimeout或requestIdleCallback将其延迟几毫秒，以确保指纹一致。
    if (window.requestIdleCallback) {
      requestIdleCallback(() => {
        this.createFingerprint();
      });
    } else {
      setTimeout(() => {
        this.createFingerprint();
      }, 500);
    }
  },
  mounted() {
    setTimeout(() => {
      this.$visitorId && this.$notify({ type: "success", message: `当前设备的唯一标识为：\n ${this.$visitorId}`, duration: 5000 });
    }, 1500)
  }
};
</script>
